<script setup name="ChargingItemForm">
import { ref,onMounted } from "vue";
import {selectData1,saveData1,updateFun,biaoshi ,tableRef} 
from "@/utils/InsertDeleteSelectUpdates";

const dataSourceTableConst = ref([]);
const select1=async ()=>{
    dataSourceTableConst.value=await selectData1('100103',{'sycxlb':'fkfs'},"zyhttphosptalserver");
    dataSourceTableConst.value=dataSourceTableConst.value.ReContent.sytybm;
    console.log(dataSourceTableConst.value);
}
const selectWeb1=()=>{
    selectDataWeb1('GetFixCode', { "bh":"xp_043"});
}
const update1=(row ,i)=>{
    updateFun(row,i,dataSourceTableConst.value);
}
const save1=()=>{
    console.log(dataSourceTableConst);
    saveData1('100104','zyhttphosptalserver',dataSourceTableConst.value,'bm');
}


onMounted(()=>{
    select1();
});
</script>

<template>
<!-- 最外层灰色内边距8px盒子 -->
    <div class="son-main-content">
        <!-- 按钮盒子52px -->
      <div class="son-main-content-right-button">
        <div class="son-button-case-box" @click="save1()">
            <img
              src="@/assets/images/save_icon.png"
              style="width: 16px; height: 16px; margin-right: 2px"
              alt=""
              srcset=""
            />
            <div>保存</div> 
        </div>
      </div>
      <!-- 分割灰色线盒子17px -->
      <div class="son-main-content-right-line"></div>
      <!-- 表格盒子 -->
      <div class="son-main-content-right-table"> 
        <vxe-table
            ref="tableRef"
            border  
            show-overflow
            height= auto
            :columnConfig="{resizable: true}"
            :row-config="{isCurrent:true,isHover:true}"
            :edit-config="{mode: 'cell',  trigger: 'click',showIcon:false}"
            :data="dataSourceTableConst"
            :scroll-y="{enabled: true, gt: 0}"
            @editActivated="(row) => update1(row,1)"   
            @edit-closed="(row) => update1(row,2)"   
            @cell-click="(row) => update1(row,3)"   
            >
            <vxe-column field="saveflag" title="标识" width="60">
              <template  #default="{ row }">
                <div style="color: red;"> {{biaoshi(row.saveflag)}}{{row.saveflag}}</div>
              </template>
            </vxe-column>
            <vxe-column field='bh'   title='编码'   width=200   :edit-render="{}">
            </vxe-column>
             <vxe-column field='mc'  title='名称'   width=200   :edit-render="{}">
            </vxe-column>
            <vxe-column field='jzlx'  title='三医码' width=200   :edit-render="{ name: 'input'}">
            </vxe-column>
             
           
        </vxe-table> 
      </div>
    </div>
</template>

<style lang="scss" scoped>
 .son-main-content{
    width: 100%;
    height: 100%;
     //按钮盒子52px
    .son-main-content-right-button{
        height: 46px;
        width: 100%;
        padding-top: 13px;
        .son-button-case-box{
            display: flex;
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中，如果需要的话 */
            color: #333333;
            height: 20px;
            width: 72px;
            margin-right: 12px;
            background-color: #FFFFFF;
            cursor: pointer; /* 可选：使光标变为指针，表示可点击 */
        }
    }
    //分割灰色线盒子17px
    .son-main-content-right-line{
            height: 1px;
            background: #EBEBEB;
            margin-bottom: 16px;
    }
    //表格盒子
    .son-main-content-right-table{
        height: calc(100% - 69px);
        width: 100%;
        background-color: bisque;
        .table-case{
            width: 100%;
            height: 100%;
        }
    }
}
 
</style>